<template>
  <div class="page">
    <global-header title="总报表" @back="$router.back()">
      <template #right>
        <div class="mr-[10px]">
          <RangeDatePopup v-model:date="searchParams.date" />
        </div>
      </template>
    </global-header>
    <main class="page-main !overflow-hidden page">
      <SearchArea @search="handleSearch" :statusOptions="statusOptions" />
      <div class="bg-white mt-[10px]">
        <div
          class="row-start-center text-[14px] text-[#888] pt-[12px] pb-[10px] px-[15px] border-bottom"
        >
          <div class="w-[25%]">类型</div>
          <div class="w-[30%]">游戏</div>
          <div class="w-[20%] text-center">时间</div>
          <div class="w-[25%] text-center">盈亏</div>
        </div>
      </div>
      <div class="page-main" ref="scrollRef">
        <div class="bg-white">
          <scroll-list
            enableRefresh
            v-model:loading="state.loading"
            v-model:refresh="state.refresh"
            :finished="state.finished"
            :length="list.length"
            @load="load"
            @refresh="refresh"
          >
            <template v-for="item in list">
              <TotalItem :item="item" />
            </template>
          </scroll-list>
        </div>
      </div>
    </main>
  </div>
</template>
<route>
  {
    name: "admin-report-total",
    meta: {
      pageIndex: 3,
    }
  }
</route>
<script setup lang="ts">
import TotalItem from "./components/total/total-item.vue";
import SearchArea from "./components/search-area.vue";

import moment from "moment";
import { reqReportCoinRecord } from "@/api/report";
import { useList } from "@/hooks/useList";

interface Params {
  Issue?: string;
  Name?: string;
  Type?: string;
  StartDate?: string;
  EndDate?: string;
  LotteryId?: number;
}

const statusOptions = [
  { text: "全部类型", value: "-1" },
  { text: "上分申请", value: "1" },
  { text: "下分申请", value: "2" },
  { text: "上分驳回", value: "3" },
  { text: "上分通过", value: "4" },
  { text: "下分驳回", value: "5" },
  { text: "下分通过", value: "6" },
  { text: "投注", value: "7" },
  { text: "投注盈利", value: "8" },
  { text: "红包", value: "9" },
  { text: "佣金", value: "10" },
  { text: "反水", value: "11" },
  { text: "游客体验金", value: "12" },
  { text: "订单取消", value: "13" },
  { text: "活动", value: "14" }
];

const searchParams = reactive<SearchParams>({
  Issue: "",
  Name: "",
  Type: "-1",
  LotteryId: -1,
  date: <Date[]>[moment().toDate(), moment().toDate()]
});

provide("searchParams", searchParams);

const getParams = () => {
  const params: Params = {};
  if (searchParams.Name) {
    params.Name = searchParams.Name;
  }
  if (searchParams.Issue) {
    params.Issue = searchParams.Issue;
  }
  if (searchParams.LotteryId && searchParams.LotteryId != -1) {
    params.LotteryId = searchParams.LotteryId;
  }
  if (searchParams.date) {
    params.StartDate = moment(searchParams.date[0]).format("YYYY-MM-DD 00:00:00");
    params.EndDate = moment(searchParams.date[1]).format("YYYY-MM-DD 23:59:59");
  }
  return params;
};

// 获取列表
const { scrollRef, state, list, getData, refresh, search, load } = useList<
  ReportCoinRecordMo,
  Params
>(reqReportCoinRecord, getParams);

const handleSearch = () => {
  search();
};

watch(
  () => searchParams.date,
  () => {
    nextTick(handleSearch);
  }
);
onMounted(() => {
  getData();
});
</script>

<style scoped></style>
